<template>
  <z-paging 
    ref="pagingRef" 
    v-model="dataList" 
    @query="queryList"
    :auto-show-system-loading="false"
  >
    <template #top>
      <wd-navbar 
        title="APP下载" 
        custom-class="navbar-custom" 
        :bordered="false" 
        safeAreaInsetTop
        left-arrow
        @click-left="goBack"
      ></wd-navbar>
    </template>

    <view class="px-[24rpx] box-border">
      <view 
        class="bg-white rounded-[16rpx] mt-[24rpx] p-[32rpx]" 
        style="border: 5rpx solid #8ded93;"
        v-for="item in dataList" 
        :key="item.id"
      >
        <!-- 头部信息 -->
        <view class="flex mb-[24rpx]">
          <view class="w-[120rpx] h-[120rpx] border-[2rpx] border-[#ddd] rounded-[24rpx] overflow-hidden flex-shrink-0">
            <image :src="item.icon" mode="aspectFill" class="w-full h-full" />
          </view>
          <view class="flex-1 ml-[24rpx] flex flex-col justify-center">
            <view class="text-[36rpx] font-400 color-[#333] mb-[8rpx] text-shadow-[1px_0px_1px_rgba(0,0,0,0.2)]">{{ item.name }}</view>
            <view class="text-[28rpx] color-[#666] text-shadow-[1px_0px_1px_rgba(0,0,0,0.4)]">{{ item.subtitle }}</view>
          </view>
        </view>
        <!-- 详细介绍 -->
        <view 
          class="text-[32rpx] color-[#555] leading-[44rpx] mb-[24rpx] text-shadow-[1px_0px_1px_rgba(0,0,0,0.2)]"
        >
          {{ item.description }}
        </view>
        <!-- 图片 -->
        <view 
          class="w-full h-[268rpx] rounded-[16rpx] overflow-hidden" 
          style="border: 2rpx solid #efefef;"
        >
          <image 
            class="w-full h-full" 
            :src="item.screenshot" 
          />
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { ref } from 'vue'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

defineOptions({
  name: 'AppDownload',
})

const pagingRef = ref(null)
const dataList = ref([])

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 查询列表数据
const queryList = (pageNo, pageSize) => {
  // 使用假数据模拟
  setTimeout(() => {
    const mockData = [
      
      {
        id: 2,
        name: '深海豚 Easleep-音乐助眠',
        subtitle: '脑科学，给您一夜好眠',
        icon: '/static/product/d1.png',
        description: 'Easleep将客观记录您的脑波数据，精准分析大脑状态生成多维度的睡眠分析报告，并基于脑科学提供B-CBTI®睡眠修复方案。',
        screenshot: '/static/product/d2.png'
      },
      {
        id: 1,
        name: '轻凌',
        subtitle: '智能灵巧假腿',
        icon: '/static/product/d3.png',
        description: '通过轻凌APP 轻松控制轻凌M3智能仿生腿，轻凌App集成装配师和用户两种身份登录方便，装配师调节参数管理用户，方便用户查看产品状态更好的使用仿生腿。',
        screenshot: '/static/product/d4.png'
      },
    ]
    
    pagingRef.value?.complete(mockData)
  }, 500)
}
</script>

<style>
page{
  background-color: #F5F5F5;
}
</style>
